<template>
  <div style="width: 100%; height: 100%">
    <h1>学生管理系统</h1>
    <form>
      <label>用户名:</label>
      <input type="text" id="username" v-model="username" /><br />
      <label>密码:</label>
      <input type="password" id="password" v-model="password" /><br />
      <label>邮箱:</label>
      <input type="email" id="email" v-model="email" /><br />
    </form>
    <button class="btn1" @click="add">添加</button>
    <button class="btn2" @click="reset">重置</button>

    <div class="box">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>密码</th>
            <th>邮箱</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in user" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.password }}</td>
            <td>{{ item.email }}</td>
            <td>
              <!-- <button class="btn3" @click="exit(item.id)">编辑</button> -->
              <button class="btn4" @click="del(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const user = ref([
  { id: 0, name: "hyt", password: "3424324", email: "123456@qq.com" },
  { id: 1, name: "哈哈", password: "3424234234", email: "123456@163.com" },
]);

const username = ref();
const password = ref();
const email = ref();
const add = () => {
  console.log(username.value); //查看点击后输入框的值

  var arr = {
    id: user.value.length,
    name: username.value,
    password: password.value,
    email: email.value,
  };
  user.value.push(arr);
  //清空操作(注意！！！ .value)
  username.value = "";
  password.value = "";
  email.value = "";
};
const del = (id) => {
  user.value = user.value.filter((item) => item.id !== id);
};

//重置
const reset = () => {
  username.value = "";
  password.value = "";
  email.value = "";
};
</script>

<style scoped>
body {
  background-color: rgb(248, 248, 248);
}

h1 {
  text-align: center;
}

form {
  text-align: center;
}

form label {
  display: inline-block;
  width: 60px;
  text-align: right;
}

form label::before {
  content: "*";
  color: red;
}

form input {
  width: 80%;
  height: 25px;
  margin-top: 30px;
  border: 1px solid rgb(242, 242, 242);
  background-color: rgb(251, 251, 251);
  border-radius: 5px;
}

button {
  width: 50px;
  height: 30px;
  color: white;
  border: 0px;
  border-radius: 3px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.btn1 {
  margin-left: 16%;
  background-color: rgb(123, 202, 3);
}

.btn2 {
  background-color: #000000;
}

.btn3,
.btn5 {
  margin-right: 10px;
  background-color: rgb(64, 158, 255);
}

.btn4 {
  /* margin-left: 10px; */
  background-color: rgb(245, 108, 108);
}

.btn6 {
  margin-left: 10px;
  background-color: rgb(107, 175, 4);
}

.box {
  width: 80%;
  height: 50vh;
  margin: 0 auto;
  overflow: auto;
}

/* 滚动条样式 */
.box::-webkit-scrollbar {
  width: 8px;
}

.box::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.box::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 4px;
}

.box::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

.box table {
  width: 100%;
  /* 表格宽度设置为100%，确保表格填满 .box */
  border: 1px solid rgb(241, 241, 241);
  border-collapse: collapse;
  overflow-y: scroll;
  user-select: none;
  /* 标准语法 */
}

table tr {
  height: 30px;
  border-bottom: 1px solid rgb(230, 230, 230);
  background-color: white;
}

table thead tr:nth-child(1) {
  background-color: rgba(239, 239, 239, 0.258);
}

table tr:nth-child(even) {
  background-color: rgba(211, 186, 227, 0.153);
}

table tr:nth-child(odd) {
  background-color: rgba(154, 193, 255, 0.073);
}

table tbody tr:hover {
  background-color: rgba(192, 239, 255, 0.511);
  cursor: default;
}

table tr th,
td {
  height: 40px;
  text-align: left;
  font-weight: 400;
  padding-left: 10px;
}

table thead th:nth-child(5) {
  text-align: center;
}

table tbody tr td:nth-child(5) {
  /* text-align: center; */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
